<template>
  <nav class="nav-bar" v-nav-current="{
    activeCLass:'active',
    className:'nav-item',
    curIdx
  }">
    <div class="scroll-area">
      <div class="nav-list" :style="{width: navData.length * 0.6 + 'rem'}">
        <nav-item class="nav-item" v-for="(item,index) of navData" :key="item.type" :item="item" :index="index" @setCurIdx="setCurIdx">
        </nav-item>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import NavItem from "./NavItem.vue";
import navData from "../../data/nav";
import { navCurrent } from "../../directives/index";

export default defineComponent({
  name: "NavBar",
  components: {
    NavItem,
  },
  directives: { navCurrent },
  setup(props, ctx) {
    const state = reactive({
      curIdx: 0,
    });

    //点击nav-item时
    const setCurIdx = (curIdx: number, type: string): void => {
      //设置curIdx
      state.curIdx = curIdx;

      //同时更改type
      ctx.emit("setCurrentType", type);
    };

    return {
      navData,
      ...toRefs(state),
      setCurIdx,
    };
  },
});
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0.44rem;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 0.38rem;
  border-bottom: 0.01rem solid #ddd;
  background-color: #fff;
  overflow: hidden;

  .scroll-area {
    width: 100%;
    height: 0.45rem;
    overflow-x: auto;

    .nav-list {
      display: flex;
      flex-direction: row;
      height: 0.38rem;
    }
  }
}
</style>